<template>
  <div class="container">
    <div class="backgound-position background-img"></div>
    <div class="backgound-position background-opacity"></div>
    <div class="input-container">
      <h1>Good {{period}}</h1>
      <input
        class="add-todo"
        type="text"
        placeholder="What is your main focus for today?" 
        v-model="itemText"
        @keyup.enter="addItem"
      />
      <div class="todo-wrapper" ref="wrapper">
        <ul class="todo-list">
          <li 
            v-for="item in passTodoItems"
            v-bind:key="item.id"
            :class="{'todo-completed': item.completed}" 
            >
            <input class="toggle-radio" type="checkbox" v-model="item.completed">
            <span class="todo-text">{{item.text}}</span>
            <button class="todo-remove" type="button" @click="removeTodoItem(item)">x</button>
          </li>
          <li v-if="isShowOptions">
            <input class="toggle-radio" type="checkbox" v-model="allSelected">
            <button
              :class="[{selected: todoType === 'all'}, 'button-type']"
              @click="showTypeTodos('all')"
              type="button">所有</button>
            <button 
              :class="[{selected: todoType === 'completed'}, 'button-type']"
              @click="showTypeTodos('completed')"
              type="button">已完成</button>
            <button 
              :class="[{selected: todoType === 'active'}, 'button-type']"
              @click="showTypeTodos('active')"
              type="button">未完成</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import BScroll from 'better-scroll';
export default {
  name: "TodoList",
  data() {
    return {
      period: "", //欢迎时间
      itemText: "", //输入
      todoType: "all", //任务类型
      allTodoItems: [],
      scroll: ''
    };
  },
  created() {
    this.period = new Date().getHours() > 12 ? "Afternoon" : "Morning";
    this.allTodoItems = JSON.parse(localStorage.getItem("todoItems")) || [];
  },
  mounted () {
    this.$nextTick(function(){
      this.scroll = new BScroll(this.$refs.wrapper);
      console.log(this.scroll);
    });
  },
  watch: {
    allTodoItems: {
      handler() {
        localStorage.setItem("todoItems", JSON.stringify(this.allTodoItems));
      },
      deep: true //深度监听对象属性的变化，如果没有检测不到对象属性的变化
    }
  },
  computed: {
    //展示的任务
    passTodoItems() {
      return this[this.todoType](this.allTodoItems);
    },
    //是否显示底部的选项
    isShowOptions() {
      return this.allTodoItems.length;
    },
    allSelected: {
      get: function() {
        return this.allTodoItems.every(item => item.completed);
      },
      set: function(value) {
        this.allTodoItems.forEach(item => (item.completed = value));
      }
    }
  },
  methods: {
    //返回全部
    all(listItems) {
      return listItems;
    },
    //未完成
    active(listItems) {
      return listItems.filter(value => !value.completed);
    },
    //已完成
    completed(listItems) {
      return listItems.filter(value => value.completed);
    },
    //添加任务
    addItem() {
      this.allTodoItems.push({
        id: this.allTodoItems.length,
        text: this.itemText,
        completed: false
      });
      this.itemText = "";
    },
    //删除任务
    removeTodoItem(item) {
      this.allTodoItems = this.allTodoItems.filter(
        value => value.id != item.id
      );
    },
    //选择类型
    showTypeTodos(type) {
      this.todoType = !!type ? type : "all";
    }
  }
};
</script>

<style lang="scss" scoped>
::-moz-placeholder {
  color: #e2e2e2;
}
::-webkit-input-placeholder {
  color: #e2e2e2;
}
:-ms-input-placeholder {
  color: #e2e2e2;
}
.backgound-position {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.background-img {
  background-image: url("../assets/book-bookcase.jpg");
  background-color: transparent;
}
.background-opacity {
  background-color: rgba(0, 0, 0, 0.6);
}
.input-container {
  position: relative;
  top: 5em;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  h1 {
    font-size: 3rem;
    color: #fff;
  }
  .add-todo {
    margin-top: 2em;
    padding: 0 0.8em;
    width: 25em;
    height: 2.5em;
    font-size: 1.5rem;
  }
  .todo-wrapper {
    overflow-y: scroll;
    height: 25em;
  }
  .todo-list {
    margin: 0 auto;
    padding: 0 0.8em;
    width: 25em;
    background-color: #fff;
    color: #5451e4;
    font-size: 1.5rem;
    .todo-completed {
      text-decoration: line-through;
      color: #ccc;
    }
    li {
      overflow: hidden;
      border-top: 1px solid #eee;
      height: 2.5em;
      line-height: 2.5em;
      .todo-remove {
        opacity: 0;
        margin-top: 0.4em;
        float: right;
        background-color: transparent;
        color: #5451e4;
        cursor: pointer;
      }
      &:hover {
        .todo-remove {
          opacity: 1;
        }
      }
      .toggle-radio {
        position: relative;
        margin-top: 0.7em;
        float: left;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        border: 1px solid #5451e4;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        &:checked {
          &:after {
            content: "✓";
            position: absolute;
            top: 0.1em;
            left: 0.1em;
            width: 0.8em;
            line-height: 0.8em;
            color: #5451e4;
          }
        }
      }
      .button-type {
        margin: 0 0.5em;
        padding: 0.1em 0.3em;
        background-color: #eee;
        border-radius: 0.3em;
        font-size: 0.8rem;
        color: #ccc;
        cursor: pointer;
      }
      .selected {
        background-color: #5451e4;
        color: #fff;
      }
    }
  }
}
</style>
